<template>
  <div>
    <div id="myChart" class="demoEcharts"></div>
    <div id="myChartLine" class="demoLineEcharts"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.drawLine()
    this.drawChartLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      const option = {
        // backgroundColor: '#0035AC', // 容器背景色
        textStyle: {
          color: '#7493D7' // 内容字体颜色
        },
        grid: {
          right: '16%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['2020年', '2021年', '同比'],
          right: 20,
          top: 20,
          itemWidth: 10, // 图例的宽度
          itemHeight: 10, // 图例的高度
          textStyle: {
            color: '#7693D5', // 标题字体颜色
            fontSize: 12 // 标题字体大小
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 40,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#999'
              }
            }
          },
          {
            type: 'value',
            min: -6,
            max: 2,
            interval: 2,
            axisLabel: {
              formatter: '{value} %'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#999'
              }
            }
          }
        ],
        series: [
          {
            name: '2020年',
            type: 'bar',
            data: [21, 22, 24, 31, 33, 36],
            color: '#3768D1'
          },
          {
            name: '2021年',
            type: 'bar',
            data: [20, 23, 25, 28, 32],
            color: '#BED9FF'
          },
          {
            name: '同比',
            type: 'line',
            yAxisIndex: 1,
            data: [-2, 0.4, 0.1, -1.9, -2.1],
            color: '#67D982'
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    },
    drawChartLine() {
      const myChartLine = this.$echarts.init(document.getElementById('myChartLine'))
      const option = {
        xAxis: {
          type: 'category',
          data: ['2020.12', '2021.01', '2021.02', '2021.03', '2021.04', '2021.05', '2021.06']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [50, 60, 70, 80, 90, 100, 120],
            type: 'line'
          },
          {
            data: [130, 80, 124, 118, 235, 247, 260],
            type: 'line'
          },
          {
            data: [100, 120, 144, 108, 145, 157, 160],
            type: 'line'
          }
        ]
      }
      // 绘制图表
      myChartLine.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.demoEcharts {
  height: 300px;
  width: 320px;
  margin: 10px auto;
  border-radius: 10px;
  background-color: #0035ac;
}
.demoLineEcharts {
  height: 300px;
  width: 320px;
  margin: 10px auto;
  border-radius: 10px;
  background-color: #202868;
}
</style>
